import './index.less';
import {inject, observer} from 'mobx-react';
import React from 'react';

import {WeaTop, WeaTab, WeaRightMenu, WeaHelpfulTip, WeaLocaleProvider} from 'ecCom';
import {Button} from 'antd';
import AdvanceSearch from './AdvanceSearch';
import FlowReportDetail from '../report-public/flow-report-detail/index';
import * as ReportUtil from '../../../util/reportUtil';
import ReportNoRight from '../report-public/report-no-right/index';
import {WeaTableNew} from "comsMobx";

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('flowHandleAnalyseStore')
@observer
export default class Main extends React.Component {

    constructor(props) {
        super(props);

        const {flowHandleAnalyseStore} = props;
        const {initDatas} = flowHandleAnalyseStore;
        initDatas && initDatas();
    }

    componentWillUnmount() {
        const {clearStatus} = this.props.flowHandleAnalyseStore;
        clearStatus();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            const {clearStatus, initDatas} = this.props.flowHandleAnalyseStore;
            clearStatus();
            initDatas();
        }
    }

    render() {
        const {flowHandleAnalyseStore} = this.props;
        const {loading = false, advanceSearchData = {}, advanceSearchPara = {}, analyseData = {}, modalPara = {}, labels = {}, collectParams, tableStore, dataKey, exportExcelUrl = ''} = flowHandleAnalyseStore;
        const {updateAdvanceSearchPara, showModal, closeModal} = flowHandleAnalyseStore; //action
        const {reportTitle = '', echart1Title = '', echart2Title = ''} = labels;
        const {tabDatas = [], noRight = false, bottomInfo = ''} = advanceSearchData;
        const {countData = [], echart1 = [], echart2 = []} = analyseData;
        const {tabKey = 1} = advanceSearchPara;
        return (
            <div className="flow-handle-analyse">
                {noRight ?
                    <ReportNoRight ecId={`${this && this.props && this.props.ecId || ''}_ReportNoRight@vqkp50`}/>
                    :
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qqe85k`} loading={loading} icon={<i className='icon-coms-workflow'/>} buttons={this.getButtons()}
                            iconBgcolor='#0079DE' title={reportTitle} showDropIcon={false}>
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@2usc3p`} datas={tabDatas} keyParam={"key"} selectedKey={tabKey}
                                onChange={this.doChangeTab.bind(this)}/>
                        <AdvanceSearch ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearch@k0t636`} advanceSearchData={advanceSearchData} advanceSearchPara={advanceSearchPara}
                                       updateAdvanceSearchPara={updateAdvanceSearchPara} tabKey={tabKey}/>
                        <div className={"flow-handle-table"}>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@00di20`} sessionkey={dataKey}
                                      comsWeaTableStore={tableStore}
                                      getColumns={this.getColumns}
                                      rowKey={(record, index) => {
                                          return index;
                                      }}
                                      needScroll={true}
                                      hasOrder={true}
                                      heightSpace={40}
                            />
                        </div>
                        <FlowReportDetail ecId={`${this && this.props && this.props.ecId || ''}_FlowReportDetail@3lbnwl`} {...modalPara} closeModal={closeModal} collectParams={collectParams}/>
                        <div className='count-bottom'>{bottomInfo}</div>
                        <iframe ref="exportExcel" name="exportExcel" src={exportExcelUrl}
                                style={{display: 'none'}}></iframe>
                    </WeaTop>
                }
            </div>
        )
    }

    getButtons() {
        const {exportExcel} = this.props.flowHandleAnalyseStore;
        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9rv8i7@exportExcel`} type="primary" onClick={() => exportExcel()}>{getLabel(28343, '导出Excel')}</Button>);
        return btns;
    }

    doChangeTab(tabKey) {
        const {flowHandleAnalyseStore} = this.props;
        const {updateAdvanceSearchPara, advanceSearchData, advanceSearchPara = {}} = flowHandleAnalyseStore;
        const updateInfo = {tabKey};
        let {orgtype} = advanceSearchPara;

        if (tabKey == 2) {
            if (orgtype > 3) orgtype = 3;
        } else if (tabKey == 3) {
            if (orgtype > 2) orgtype = 2;
        }
        updateInfo['orgtype'] = orgtype;
        //条件初始化
        updateInfo.datarange = 1;
        updateInfo.dataid = '';

        updateInfo.dateType = 1;
        updateInfo.startDate = '';
        updateInfo.endDate = '';
        //获取默认值
        const {config = []} = advanceSearchData;
        if (orgtype > 1 && config.length > 0) {
            const {selectLinkageDatas = {}} = config[0];
            updateInfo['orgid'] = ReportUtil.getDefaultId(orgtype, selectLinkageDatas);
        }
        updateAdvanceSearchPara && updateAdvanceSearchPara(updateInfo);
    }

    getColumns = (columns) =>  {
        const {flowHandleAnalyseStore} = this.props;
        const {showModal} = flowHandleAnalyseStore;
        let _this = this;
        let newColumns = columns.slice();
        let helpTipStyle = {'marginTop': '2px', 'marginLeft': '2px', 'position': 'absolute'};
        newColumns = newColumns.map((column,index) => {
            let newColumn = column;
            const {dataIndex, title} = newColumn;
            let tips = '';
            let width = 115;
            if (dataIndex === 'p1') {
                tips = getLabel(124830, '已办率=已办/参与');
                helpTipStyle = {'position': 'absolute'};
            } else if (dataIndex === 'p2') {
                tips = getLabel(124831, '办结率=办结/参与');
                helpTipStyle = {'position': 'absolute'};
            } else if (dataIndex == 'c4') {
                tips = getLabel(385019, '未查看的待办');
                width = 85;
            } else if (dataIndex == 'c5') {
                width = 120;
                tips = getLabel(385020, '已查看未处理的待办');
            }
            if (tips) {
                newColumn.title =
                    <span>{title}<span style={helpTipStyle}><WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@x9mpyq@${index}`} title={tips} width={width}/></span></span>
            }
            newColumn.render = (text, record, index) => { //前端元素转义
                const isClick = newColumn.dataIndex.indexOf('c') > -1;
                let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
                if (isClick) {
                    const key = newColumn.dataIndex;
                    return (
                        <div className={`click-item`} onClick={() => showModal(record, key)}>
                            <span>{valueSpan}</span>
                        </div>
                    )
                }
                return (
                    <div className="wea-url" dangerouslySetInnerHTML={{__html: valueSpan}}/>
                )
            }
            return newColumn;
        });
        return newColumns
    }

}